<script setup>
import Son1Com from '@/components/Son1Com.vue'
import Son2Com from '@/components/Son2Com.vue'
// 导入
import { useCounterStore } from '@/store/counter'
import { useChannelStore } from '@/store/channel'
// 数值操作
const counterStore = useCounterStore()
console.log(counterStore)
// 频道数据
const channelStore = useChannelStore()
console.log(channelStore)

// 此时，直接解构，不处理，数据会丢失响应式
//import { storeToRefs } from 'pinia'
//const { count,msg } = storeToRefs(counterStore)
//const { channelList } = storeToRefs(channelStore)
//const { getList } = channelStore
</script>

<template>
  <div>
    <h3>
      App.vue根组件
      - {{counterStore.count}}
      - {{counterStore.msg}}
      <!--{{count}}
      {{msg}}-->
    </h3>
    <Son1Com></Son1Com>
    <Son2Com></Son2Com>
    <hr>
    <button @click="channelStore.getList">获取频道数据</button>
    <ul>
      <li v-for="item in channelStore.channelList" :key="item.id">{{item.name}}</li>
    </ul>
  </div>
</template>

<style scoped>

</style>
